<template lang="html">
  <div class="box">
    <ul class="classBox">
      <li class="classItem" v-for="(v,index) in list" :key="index">
          <div class="ItemMain" @click="gotoDetail(v.id)">
            <div class="imgBox">
              <img :src="v.iconImg" alt="">
            </div>
            <div class="className">
              {{v.typeName}}
            </div>
          </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props:{
    list:Array
  },
  data(){
    return {

    }
  },
  methods:{
    gotoDetail(type){
      this.$router.push({ path: '/projectList', query: { type }})
    }
  }
}
</script>

<style lang="less" scoped>
  .box{
    width:100%;
    padding:10px 0;
    .classBox{
      width:100%;
      display: flex;
      .classItem{
        .ItemMain{
          width:0.54rem;
          margin-left: .2rem;
          .imgBox{
            width:0.54rem;
            height:0.54rem;
            background:#dedede;
            border-radius: 50%;
            img{
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          .className{
            margin-top:0.06rem;
            width:100%;
            text-align: center;
            font-weight: bold;
            font-size:0.12rem;
          }
        }
      }
    }
  }
</style>
